<template>
  <div id="mv">
    <transition name="fade">
      <loading v-if="isLoading"></loading>
    </transition>
    <div class="allMv">
      <div id="choose">
        <div class="choose">
          <div class="name">
            <span>地区</span>
          </div>
          <div class="list">
            <div
              v-for="(item, index) in areaList"
              :key="index"
              @click="areaChoose(item, index)"
              class="item"
              :class="[areaNum == index ? 'active' : '']"
            >
              <span>{{ item.value }}</span>
            </div>
          </div>
        </div>
        <div class="choose">
          <div class="name">
            <span>类型</span>
          </div>
          <div class="list">
            <div
              v-for="(item, index) in typeList"
              :key="index"
              @click="tpyeChoose(item, index)"
              class="item"
              :class="[typeNum == index ? 'active' : '']"
            >
              <span>{{ item.value }}</span>
            </div>
          </div>
        </div>
        <div class="choose">
          <div class="name">
            <span>升序</span>
          </div>
          <div class="list">
            <div
              v-for="(item, index) in orderList"
              :key="index"
              @click="orderChoose(item, index)"
              class="item"
              :class="[orderNum == index ? 'active' : '']"
            >
              <span>{{ item.value }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div
          class="mvItem"
          v-for="(item, index) in mvList"
          :key="index"
          @mouseover="playShow = index"
          @mouseleave="playShow = false"
        >
          <div class="img">
            <img v-lazy="item.cover" alt="" />
          </div>
          <div class="info">
            <div class="name">
              <span>{{ item.name }}</span>
            </div>
            <div class="artName">
              <span
                v-for="(nameItem, nameIndex) in item.artists"
                :key="nameIndex"
                @click="playMv(item)"
              >
                {{ nameItem.name }}
              </span>
            </div>
          </div>
          <transition name="count-fade">
            <div class="playCount" v-show="playShow === index">
              <i class="playIcno"></i>
              <span>{{ item.playCount }}</span>
            </div>
          </transition>
          <transition name="play-fade">
            <div class="play" v-show="playShow === index">
              <img @click="playMv(item)" src="../../assets/play.png" alt="" />
            </div>
          </transition>
        </div>
      </div>
      <div class="pages">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="pages.current"
          :page-size="pages.size"
          layout="total, prev, pager, next"
          :total="pages.count"
        >
        </el-pagination>
      </div>
    </div>
    <div class="rankMv">
      <h2>MV排行榜</h2>
      <div class="rankCont">
        <div class="sort">
          <span v-for="(item, index) in rankList" :key="index">
            {{ item.value }}</span
          >
        </div>
        <div class="result">
          <div
            class="item"
            v-for="(item, index) in rankResList"
            :key="index"
            @mouseover="rankShow = index"
            @mouseleave="rankShow = false"
          >
            <div class="no">
              <span v-show="index < 9">0{{ index + 1 }}</span>
              <span v-show="index >= 9">{{ index + 1 }}</span>
            </div>
            <div class="img">
              <img v-lazy="item.cover" alt="" />
            </div>
            <div class="info">
              <div class="name" @click="playMv(item)">
                <span>{{ item.name }}</span>
              </div>
              <div class="artName">
                <span
                  v-for="(nameItem, nameIndex) in item.artists"
                  :key="nameIndex"
                >
                  {{ nameItem.name }}
                </span>
              </div>
            </div>
            <transition name="play-fade">
              <div class="hot" v-show="rankShow === index">
                <i class="hotIcno"></i>
                <span>{{ item.playCount }}</span>
              </div>
            </transition>
            <transition name="play-fade">
              <div
                class="play"
                v-show="rankShow === index"
                @click="playMv(item)"
              >
                <img src="../../assets/play.png" alt="" />
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loading from "../../components/loading.vue";
export default {
  components: {
    loading,
  },
  data() {
    return {
      // 技加载动画
      isLoading: true,
      // 分页数据
      pages: {
        count: 0,
        size: 32,
        current: 0,
      },
      // 地区选择
      areaNum: 0,
      //   地区名称
      areaName: null,
      // 地区列表
      areaList: [
        {
          num: 0,
          value: "全部",
        },
        {
          num: 1,
          value: "内地",
        },
        {
          num: 2,
          value: "港台",
        },
        {
          num: 3,
          value: "欧美",
        },
        {
          num: 4,
          value: "日本",
        },
        {
          num: 5,
          value: "韩国",
        },
      ],
      //   类型选择
      typeNum: 0,
      //   类型名称
      typeName: null,
      // 类型列表
      typeList: [
        {
          num: 0,
          value: "全部",
        },
        {
          num: 1,
          value: "官方版",
        },
        {
          num: 2,
          value: "原生",
        },
        {
          num: 3,
          value: "现场版",
        },
        {
          num: 4,
          value: "网易出品",
        },
      ],
      //   排序选择
      orderNum: 0,
      //   排序名称
      orderName: null,
      // 排序列表
      orderList: [
        {
          num: 0,
          value: "上升最快",
        },
        {
          num: 1,
          value: "最热",
        },
        {
          num: 2,
          value: "最新",
        },
      ],
      //   mv列表
      mvList: [],
      //   是否显示播放量和播放键
      playShow: false,
      //   排行榜分类
      rankList: [
        {
          num: 0,
          value: "全部",
        },
        {
          num: 1,
          value: "内地",
        },
        {
          num: 2,
          value: "港台",
        },
        {
          num: 3,
          value: "欧美",
        },
        {
          num: 4,
          value: "日本",
        },
        {
          num: 5,
          value: "韩国",
        },
      ],
      //   排行榜nv列表
      rankResList: [],
      //   排行榜播放键是否显示
      rankShow: false,
    };
  },
  methods: {
    //   选择地区
    areaChoose(item, index) {
      this.areaNum = index;
      this.areaName = item.value;
      this.getMvList(
        this.pages.size,
        this.pages.current,
        this.areaName,
        this.typeName,
        this.orderName
      );
    },
    // 选择类型
    typeChoose(item, index) {
      this.typeNum = index;
      this.typeName = item.value;
      this.getMvList(
        this.pages.size,
        this.pages.current,
        this.areaName,
        this.typeName,
        this.orderName
      );
    },
    // 选择升序
    orderChoose(item, index) {
      this.orderNum = index;
      this.orderName = item.value;
      this.getMvList(
        this.pages.size,
        this.pages.current,
        this.areaName,
        this.typeName,
        this.orderName
      );
    },
    // 请求mv列表
    getMvList(limit, offset, area, type, order) {
      this.$axios({
        url: "/mv/all",
        params: {
          limit: limit,
          offset: offset,
          area: area,
          type: type,
          order: order,
        },
      }).then((res) => {
        this.isLoading = false;
        this.mvList = res.data.data;
        this.pages.count = res.data.count;
      });
    },
    // 分页
    handleCurrentChange(val) {
      this.$axios({
        url: "/mv/all",
        params: {
          limit: this.pages.size,
          offset: (val - 1) * this.pages.size,
        },
      }).then((res) => {
        this.mvList = res.data.data;
      });
    },
    // 跳转到mv界面
    playMv(item) {
      this.$router.replace({
        name: "mvDetail",
        query: {
          id: item.id,
        },
      });
    },
  },
  created() {
    //   默认显示mv
    this.getMvList(
      this.pages.size,
      this.pages.current,
      this.areaList[this.areaNum].value,
      this.typeList[this.typeNum].value,
      this.orderList[this.orderNum].value
    );

    this.areaName = this.areaList[this.areaNum].value;
    this.typeName = this.typeList[this.typeNum].value;
    this.orderName = this.orderList[this.orderNum].value;

    // 请求排行榜
    this.$axios({
      url: "/top/mv",
      params: {
        limit: 10,
      },
    }).then((res) => {
      this.rankResList = res.data.data;
    });
  },
};
</script>

<style scoped>
@import url("../../css/mv");
</style>